//导入react和react-dom
// react负责创建元素-虚拟的Dom
import React from 'react';
// reactDOM负责渲染react元素
import ReactDOM from 'react-dom';

// 条件渲染
// 1、if else（配合函数）
// 2、三元表达式
// 3、逻辑运算符

// 需求：通过isShow控制是否显示
const isShow = false;

function showLoading() {
  if (isShow) {
    return <h1>数据正常显示</h1>;
  } else {
    return <h2>数据加载中</h2>;
  }
}

const list = (
  <>
    {/* 函数 */}
    {showLoading()}
    {/* 三元表达式 */}
    <div>{isShow ? <h1>数据正常显示</h1> : <h2>数据加载中</h2>}</div>
    {/* 逻辑运算符 */}
    <div>{isShow && <h1>数据正常显示</h1>}</div>
    <div>{!isShow && <h2>数据加载中...</h2>}</div>
  </>
);
// 渲染元素到页面
// 语法：ReactDOM.render（react元素，真实的dom作为挂载点）
ReactDOM.render(list, document.getElementById('root'));
